<template>
    <div class="page">
        <nav-bar :isLogin="true">
            <!-- 具名插槽 -->
            <template #left>
                <div>
                    ele.me
                </div>
            </template>

        </nav-bar>
        <div class="dingwei">
            <div class="dingwei_text">
               <span>
                 当前定位城市：
               </span>
               <span class="text">
                定位不准时请在城市列表选择
               </span>
            </div>
            <div>
                <van-cell :title="city ? city.name : ''" is-link title-class="cell_title"  @click="goInfo(city.id)"></van-cell>
            </div>
        </div>

        <div class="tot_city">
            <div class="title">
                热门城市
            </div>
            <div class="hot_citys">
               <div v-for="(item, index) in hotCity" :key="index"  @click="goInfo(item.id)">
                    {{ item.name }}
                </div>
            </div>
        </div>

        <div class="tot_city">
            <div v-for="(item, index) in keys" :key="index">
                <div class="title">
                    {{ item }}
                    <span> {{index==0?'(按字母排序)':''}}</span>
                </div>
                <div class="hot_citys">
                    <div v-for="(city, i) in allCity[item]" :key="i" class="all_city" @click="goInfo(city.id)">
                        {{ city.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
 import { getCity } from '@/api/city';

 export default{
    data(){
        return{
            city: null,
            hotCity:[],
            allCity:[],
            keys:[]
        }
    },
     async created(){
    // 获取当前定位城市
      let res = await getCity({type:"guess"});
        this.city = res.data;
    //获取热门城市
      let hotCity = await getCity({type:"hot"});
        this.hotCity = hotCity.data;
    // 获取所有城市列表
      let getAllCity = await getCity({type:"group"});
      this.allCity = getAllCity.data;

      for(let key in getAllCity.data){
            this.keys.push(key)
         }
         this.keys.sort();
    },
    methods:{
        // 城市详情
        goInfo(id){
            this.$router.push({
                path:"/city/"+id
            })
        }
    }
 }
</script>
<style lang="less" scoped>
@boder: 1px solid #e4e4e4;

.dingwei {
    width: 100%;
    background: #fff;
    border-bottom: 2px solid #e4e4e4;

    .dingwei_text {
        font-size: 14px;
        color: #666;
        padding: 13px 10px;
        border-bottom: 1px solid #e4e4e4;
        display: flex;
        justify-content: space-between;

        .text {
            font-weight: bold;
            color: #9f9f9f;
        }
    }
}

.cell_title {
    color: #3190e8;
    font-size: 16px;
}

.tot_city {
    background: #fff;
    border-top: 2px solid #e4e4e4;
    margin-top: 10px;

    .title {
        font-size: 14px;
        color: #666;
        padding: 10px 10px;
        span{
            margin-left: 5px;
            color: #b4b4b4;
        }
    }

    .hot_citys {
        display: flex;
        flex-wrap: wrap;
        border-top: @boder;

        div {
            width: 25%;
            text-align: center;
            padding: 10px 0;
            font-size: 14px;
            color: #3190e8;
            border-right: @boder;
            border-bottom: @boder;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .all_city {
            color: #666;
        }
    }
}

.hot_citys div:nth-child(4n) {
    border-right: none;
}
</style>